<template>
	<div class="list" ref="wrapper">
		<div>
			<div class="area">
				<div class="title border-topbottom">当前城市</div>
				<div class="button-list">
					<div class="button">北京</div>
				</div>
			</div>

			<div class="area">
				<div class="title border-topbottom">热门城市</div>
				<div class="button-list" v-for="item of hotCitys" :key="item.code">
					<div class="button">{{item.name}}</div>
				</div>
			</div>
			<div class="area">
				<div class="title border-topbottom">A</div>
				<div class="item-list">
					<div class="item border-topbottom" v-for="item of citys" :key="item.code">{{item.name}}</div>
					
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	import Bscroll from 'better-scroll'
	export default {
		name: 'CityList',
		props:{
		"hotCitys":Array,
		 "citys":Array
		},
		mounted() {
			if (!this.picScroll) {
				this.picScroll = new Bscroll(this.$refs.wrapper, {
					scrollX: true,
					eventPassthrough: 'vertical'
				})
			} else {
				this.picScroll.refresh();
			}

			// this.scroll = new BScroll(this.$refs.wrapper);
		}
	}
</script>

<style lang="stylus" scoped>
	.list {
		margin-top: -10px;
		display: fixed;
		left: 0;
		top: 0;
		bottom: 0;
		width: 100%;
		overflow: hidden;
	}

	.border-topbottom {
		border-bottom: 1px #ccc solid;
	}

	.title {
		height: 20px;
		line-height: 20px;
		background: #eee;
		padding-left: 0.5rem;
		font-size: 14px;
		clear: both;
		border-top: 1px #ccc solid;
	}

	.button-list {
		padding-left: 0.5rem;
	}

	.button {
		margin: 5px;
		height: 24px;
		line-height: 24px;
		border: 1px #ccc solid;
		width: 30%;
		border-radius: 5px;
		text-align: center;
		float: left;
		position: relative;
		left: -3px;
	}

	.item {
		padding-left: 0.5rem;
		line-height: 30px;
	}

	
</style>
